    <template>
        <div>
            <a-modal
            :title="(isView?'查看':(fromState.id?'编辑':'添加'))+fromState.modalTitle"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
            class="rewardsAndPunishmentsForm-achievement-form-model"
            :width="1020"
            >
            <a-form :form="form" style="margin-top: 24px;" v-if="visible">
            <a-descriptions bordered style="width: 100%;" :column="2" class="descriptions-add">
                <a-descriptions-item :span="2" v-if="fromState.index == 0">
                    <span slot="label" class="descriptions-label-slot">
                        <span class="xhText" >*</span>
                        资质名称
                    </span>
                    <a-form-item ref="fzzmc" prop="fzzmc" v-if="!isView">
                    <a-textarea placeholder="请输入资质名称" v-model="fromState.fzzmc" :auto-size="{ minRows: 1}"
                    v-decorator="[ 'fzzmc', {initialValue:fromState.fzzmc,rules: rules.fzzmc}]"/>
                    </a-form-item>
                    <span v-else>{{ fromState.fzzmc }}</span>
                </a-descriptions-item>
                <a-descriptions-item v-if="fromState.index == 0">
                    <span slot="label" class="descriptions-label-slot">
                        <!-- <span class="xhText" >*</span> -->
                        颁发机构
                    </span>
                    <a-form-item ref="fbfjg" prop="fbfjg" v-if="!isView">
                        <a-input
                            v-model="fromState.fbfjg"
                            placeholder="请输入颁发机构"
                        />
                    </a-form-item>
                    <span v-else>{{ fromState.fbfjg }}</span>
                </a-descriptions-item>
                <a-descriptions-item v-if="fromState.index == 0">
                    <span slot="label" class="descriptions-label-slot">
                        <span class="xhText" >*</span>
                        获得时间
                    </span>
                    <a-form-item ref="fhdjs" prop="fhdjs" v-if="!isView">
                        <a-date-picker format="YYYY-MM-DD" @change="fhdjsChange"
                                v-decorator="[ 'fhdjs', {initialValue:fromState.fhdjs,rules: rules.fhdjs}]"/>
                    </a-form-item>
                    <span v-else>{{ moment(fromState.fhdjs).format('YYYY-MM-DD') }}</span>
                </a-descriptions-item>
                <!-- 22222222 -->
                <a-descriptions-item v-if="fromState.index == 1">
                    <span slot="label" class="descriptions-label-slot">
                        <span class="xhText" >*</span>
                        项目名称
                    </span>
                    <a-form-item ref="fxmmc" prop="fxmmc" v-if="!isView">
                    <a-textarea placeholder="请输入项目名称" v-model="fromState.fxmmc" :auto-size="{ minRows: 1}"
                    v-decorator="[ 'fxmmc', {initialValue:fromState.fxmmc,rules: rules.fxmmc}]"/>
                    </a-form-item>
                    <span v-else>{{ fromState.fxmmc }}</span>
                </a-descriptions-item>
                <a-descriptions-item v-if="fromState.index == 1">
                    <span slot="label" class="descriptions-label-slot">
                        <!-- <span class="xhText" >*</span> -->
                        牵头机构
                    </span>
                    <a-form-item ref="fqtjg" prop="fqtjg" v-if="!isView">
                        <a-input
                            v-model="fromState.fqtjg"
                            placeholder="请输入牵头机构"
                        />
                    </a-form-item>
                    <span v-else>{{ fromState.fbfjg }}</span>
                </a-descriptions-item>
                <a-descriptions-item v-if="fromState.index == 1">
                    <span slot="label" class="descriptions-label-slot">
                        <!-- <span class="xhText" >*</span> -->
                        所属年度
                    </span>
                    <a-form-item ref="fssnd" prop="fssnd" v-if="!isView">
                        <a-date-picker
                            v-model:value="fromState.fssnd"
                            v-decorator="[
                                'fssnd', { initialValue:fromState.fssnd, rules: rules.fssnd}
                            ]"
                            mode="year"
                            format="YYYY"
                            placeholder="请选择年份"
                            @panelChange="panelChange"
                            style="width: 100%;"
                            :key="yearPickerKey"
                        />
                    </a-form-item>
                    <span v-else>{{ fromState.fssnd }}</span>
                </a-descriptions-item>
                <!-- 333333333333333 -->
                <a-descriptions-item v-if="fromState.index == 2">
                    <span slot="label" class="descriptions-label-slot">
                        <span class="xhText" >*</span>
                        参加时间
                    </span>
                    <a-form-item ref="fyfcysj" prop="fyfcysj" v-if="!isView">
                        <a-date-picker @change="fyfcysjChange" v-decorator="[ 'fyfcysj', {initialValue:fromState.fyfcysj,rules: rules.fyfcysj}]"/>
                    </a-form-item>
                    <span v-else>{{ moment(fromState.fyfcysj).format('YYYY-MM-DD') }}</span>
                </a-descriptions-item>
                <a-descriptions-item :span="2" v-if="fromState.index == 2">
                    <span slot="label" class="descriptions-label-slot">
                        药品名称
                    </span>
                    <a-form-item ref="fyfypmc" prop="fyfypmc" v-if="!isView">
                        <a-textarea
                            v-model="fromState.fyfypmc"
                            :auto-size="{ minRows: 1}"
                            placeholder="请输入药品名称"
                            v-decorator="[ 'fyfypmc', {initialValue:fromState.fyfypmc,rules: rules.fyfypmc}]"
                        />
                    </a-form-item>
                    <span v-else>{{ fromState.fyfypmc }}</span>
                </a-descriptions-item>
                <a-descriptions-item v-if="fromState.index == 2">
                    <span slot="label" class="descriptions-label-slot">
                        类别
                    </span>
                    <a-form-item ref="fyflb" prop="fyflb" v-if="!isView">
                        <a-input
                            v-model="fromState.fyflb"
                            placeholder="请输入类别"
                        />
                    </a-form-item>
                    <span v-else>{{ fromState.fbfjg }}</span>
                </a-descriptions-item>
                <a-descriptions-item v-if="fromState.index == 2">
                    <span slot="label" class="descriptions-label-slot">
                        负责人或参与人
                    </span>
                    <a-form-item ref="fyffzr" prop="fyffzr" v-if="!isView">
                        <a-input
                            v-model="fromState.fyffzr"
                            placeholder="请输入负责人或参与人"
                            v-decorator="[ 'fyffzr', {initialValue:fromState.fyffzr,rules: rules.fyffzr}]"
                        />
                    </a-form-item>
                    <span v-else>{{ fromState.fyffzr }}</span>
                </a-descriptions-item>
            </a-descriptions>
            </a-form>
            <template slot="footer">
                <div v-if="!isView">
                <a-button @click="visible = false">取消</a-button>
                <a-button @click="handleOk" class="blue-btn">提交并关闭</a-button>
                </div>
                <div v-else>
                    <a-button @click="visible = false" class="blue-btn">关闭</a-button>
                </div>
            </template>
        </a-modal>
        </div>
    </template>
    <script>
    import store from '@/store'
    import moment from 'moment'
    import compSelector from '@/components/compSelector/compSelector'
    import {typeRadio} from '@/components/compSearchCriteria/ContractType'
    import {
        addJcqk,
        queryByIdJlcfqk,
        
        zyzgkqaddZyjszz,
        zyzgkqaddKyxm,
        zyzgkqaddYjypqk,
        zyzgkqupdateZyzgky,
    } from './service/index'
    export default {
        components:{
        compSelector
    },
    data() {
        return {
            yearPickerKey:null,
            moment,
            isView:false,
            visible:false,
            form:this.$form.createForm(this, { name: 'achievementFrom' }),
            fromState:{},
            typeRadio:typeRadio,
            compSelectorkey: '',
            rules:{
                fzzmc: [{
                    required: true,
                    message: '请输入资质名称',
                    trigger: 'blur',
                }],
                fbjyy: [{
                    required: true,
                    message: '请输入背景原因',
                    trigger: 'blur',
                }],
                fhdjs: [{
                    type: 'object',
                    required: true,
                    message: '请选择获得时间',
                    trigger: 'blur',
                }],
                fbfjg: [{
                    required: true,
                    message: '请选择颁发机构',
                    trigger: 'blur',
                }],
                fxmmc: [{
                    required: true,
                    message: '请输入项目名称',
                    trigger: 'blur',
                }],
                fjcjb: [{
                    required: true,
                    message: '请输入级别',
                    trigger: 'blur',
                }],
                fyfypmc: [{
                    required: true,
                    message: '请输入药品名称',
                    trigger: 'blur',
                }],
                fyffzr: [{
                    required: true,
                    message: '请输入负责人或参与人',
                    trigger: 'blur',
                }],
            },
            addFFList:[zyzgkqaddZyjszz,zyzgkqaddKyxm,zyzgkqaddYjypqk],
            titleList:['获得专业技术资质情况','参与科研项目情况','参加研发药品情况'],
        }
    },
        methods: {
        getData(val,isView){
            this.isView = isView
            val.fssnd = val.fssnd?moment(val.fssnd):''
            val.fhdjs = val.fhdjs?moment(val.fhdjs):''
            val.fyfcysj = val.fyfcysj?moment(val.fyfcysj):''
            this.fromState = val
        },
        panelChange(val){
            this.fromState.fssnd = val
            this.form.setFieldsValue({
                fssnd:val
            });
            this.yearPickerKey = Date.now()
        },
        fhdjsChange(date, dateString){
            //console.log(date, dateString);
            this.fromState.fhdjs = date?moment(date):null
            //console.log(this.fromState.fhdjs)
        },
        fyfcysjChange(date, dateString){
            //console.log(date, dateString);
            this.fromState.fyfcysj = date?moment(date):null
            //console.log(this.fromState.fyfcysj)
        },
        fjcjbChange(val){
            this.fromState.fjcjb = val
            this.form.setFieldsValue({
            fjcjb: val,
            });
        },
        handleOk(){
                this.form.validateFields((err, values) => {
                    if(!err){
                        let data = {
                            ...values,
                            ...this.fromState,
                            fssnd:this.fromState.fssnd?moment(this.fromState.fssnd).format('YYYY'):'',
                            fhdjs:this.fromState.fhdjs?moment(this.fromState.fhdjs).format('YYYY-MM-DD'):'',
                            fyfcysj:this.fromState.fyfcysj?moment(this.fromState.fyfcysj).format('YYYY-MM-DD'):'',
                        }
                        //console.log(data)
                        if(this.fromState.id){
                            zyzgkqupdateZyzgky(data).then(res=>{
                                if(res.code == 200){
                                    this.$message.success(res.message)
                                    this.getData({id:this.fromState.id})
                                    this.visible = false
                                    this.$emit('extraAdditionPunishments')
                                }else{
                                    this.$message.warning(res.message)
                                }
                            })
                        }else{
                            let data = {
                                ...values,
                                ...this.fromState,
                                fssnd:this.fromState.fssnd?moment(this.fromState.fssnd).format('YYYY'):'',
                                fhdjs:this.fromState.fhdjs?moment(this.fromState.fhdjs).format('YYYY-MM-DD'):'',
                                fyfcysj:this.fromState.fyfcysj?moment(this.fromState.fyfcysj).format('YYYY-MM-DD'):'',
                                fuserid: store.getters.userInfo.id
                            }
                            this.addFFList[this.fromState.index](data).then(res=>{
                                if(res.code == 200){
                                    this.$message.success(res.message)
                                    this.visible = false
                                    this.getData({id:res.result.id})
                                    this.$emit('extraAdditionPunishments')
                                }else{
                                    this.$message.warning(res.message)
                                }
                            })
                        }
                    }else{
                    }
                })
            },
        },
    }
    </script>
    <style lang="less">
        .rewardsAndPunishmentsForm-achievement-form-model {
        .ant-form-item {
            margin-bottom: 0px;
            textarea.ant-input {
                margin-bottom: 0px;
                height: 46px;
            }
        }
        .ant-descriptions-bordered .ant-descriptions-item-label{
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            background-color:#e6f7ff;
            width: 150px !important;
            text-align: center;
            font-size: 16px;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            padding: 5px 10px !important;
    
        }
        .xhText{
            color: #f5222d;
            line-height: 36px;
            font-size: 21px;
            font-weight: 600;
            height: 30px;
        }
        .descriptions-label-slot{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        }
    </style>
    